<template>
	<view class="enroll-courses">

		<view class="enroll-courses-list flex-star">
			<view class="enroll-courses-item"  v-for="i in 6" :key="i">
				
        <view>
		
				<view class="class-name">L1-第1次计划-小结3</view>
        <view style="display: flex;">
				<view class="courses-info">
					出勤完成度：11/12
				</view>
        <view class="courses-info">
					作业完成度：60%
				</view>
      </view>
     
      </view>
      <view @click="goPage('/pages/stage-plan/planDetail')" class="detail-btn">
         查看计划
      </view>
			</view>
			
		</view>
    <view class="fixed-height"></view>
	
	

  <view class="footer-submit flex-center">
    <view class="submit-btn" @click="goPage('/pages/stage-plan/add')">
    新增计划</view
    >
  </view>
	</view>
</template>

<script >
export default {
data() {
  return {
   
  };
},
created() {

},
methods: {
  goPage(path){
    console.log(111);
  uni.navigateTo({
    url:path
  })
}
},
};
</script>

<style scoped lang="scss">
	view{
		box-sizing: border-box;
	}
	.enroll-courses{
		min-height: 100vh;
		background:#F6F7F9;
		padding: pxtovw(30) pxtovw(34);
		.enroll-courses-list{
			margin-top: pxtovw(30);
			.enroll-courses-item{
				width: pxtovw(950);
				padding: pxtovw(30) pxtovw(34);
				background: #FFFFFF;
				border-radius:pxtovw(20);
				margin-right: pxtovw(32);
				margin-bottom: pxtovw(30);
        
				&:nth-child(2n){margin-right: 0;}
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
				.name{
					text{
						display: inline-block;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: pxtovw(32);
						color: #1E1B3A;
						line-height: pxtovw(38);
					}
					.menu-dots{
						width: pxtovw(40);
						height: pxtovw(40);
					}
				}
				.class-name{
					margin: pxtovw(20) 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: pxtovw(28);
					color: #333333;
					line-height:pxtovw(33);
				}
				.courses-info{
			    margin-right: pxtovw(20);
					height: pxtovw(44);
					background: #F6F7F9;
					border-radius:pxtovw(8);
					padding: 0 pxtovw(8);
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: pxtovw(20);
					color: #666666;
					line-height: pxtovw(44);
				}
				.consumption-information{
					border-top: 1px solid #E9E9E9;
					margin-top: pxtovw(20);
					.title{
						margin-top: pxtovw(20);
						text{
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: pxtovw(26);
							color: #333333;
							line-height:pxtovw(30);
						}
						.interrogation{
							width:pxtovw(28);
							height: pxtovw(28);
							margin-left: 4px;
						}
					}
					.info{
						margin-top: pxtovw(16);
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size:pxtovw(26);
						color: #666666;
						line-height:pxtovw(30);
					}
				}
        .detail-btn{
          
          width: pxtovw(204);
height: pxtovw(66);
background: rgba(48,179,171,0.1);
border-radius: pxtovw(60);


font-weight: bold;
font-size: pxtovw(26);
color: #30B3AB;
display: flex;
          justify-content: center;
          align-items: center;

        }
			}
		}
	}
</style>